<template>
    <van-nav-bar
            title="超鸡物流"
            left-text="返回"
            left-arrow
            @click-left="goBack"
    />
  <!-- 轮播图区域 -->
    <van-swipe class="top-swipe" :autoplay="3000" indicator-color="#FF8FA3">
        <van-swipe-item>
            <img src="https://wdjichi.oss-cn-hangzhou.aliyuncs.com/abc/banner1758625949000kunkun.webp" alt="轮播图1"
                 class="swipe-img"/>
        </van-swipe-item>
        <van-swipe-item>
            <img src="https://picsum.photos/800/200?random=2" alt="轮播图2" class="swipe-img"/>
        </van-swipe-item>
        <van-swipe-item>
            <img src="https://picsum.photos/800/200?random=3" alt="轮播图3" class="swipe-img"/>
        </van-swipe-item>
    </van-swipe>

  <!-- 步骤条：订单整体状态 -->
    <div class="order-steps">
        <van-steps
                direction="vertical"
                :active="active"
                active-color="#FF8FA3"
        >
            <van-step>
                <h3>超鸡物流专送中...</h3>
                <p>2025-09-26 11:40</p>
            </van-step>
            <van-step>
                <h3>到达超鸡物流中转站</h3>
                <p>2025-09-26 10:00</p>
            </van-step>
            <van-step>
                <h3>已超鸡发货</h3>
                <p>2025-09-26 09:30</p>
            </van-step>
            <van-step>
                <h3>已送达</h3>
                <p>2025-09-26 12:00</p>
            </van-step>
        </van-steps>


    </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {useRoute, useRouter} from "vue-router";
import axios from "@/utils/axios.js";

onMounted(() => {
    const orderid = route.params.orderId;
    console.log("订单id", orderid);
    // 根据商品id请求商品详情数据
    axios.post(`/api/getStatusByOrderId?orderId=${orderid}`)
        .then(res => {
            console.log("订单状态", res);
            active.value = res;
        })
});
const active = ref(0);
const router = useRouter();
const route = useRoute();
const statusToActiveMap = {
    '专送中': 0,    // 状态为“专送中”时，激活第 0 步
    '中转站': 1,    // 状态为“中转站”时，激活第 1 步
    '已发货': 2     // 状态为“已发货”时，激活第 2 步
};

const goBack = () => {
    router.back();
};
</script>

<style scoped>
/* 轮播图容器样式 */
.top-swipe {
    width: 100%;
    height: 400px; /* 可根据需求调整轮播图高度 */
    margin-bottom: 15px; /* 与下方步骤条保持间距 */
}

/* 轮播图图片样式 */
.swipe-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，填充容器 */
}

/* 步骤条容器样式 */
.order-steps {
    padding: 0 15px; /* 左右内边距，避免贴边 */
}
</style>